import React from 'react';
import Taro, { requirePlugin } from '@tarojs/taro';

import { connect } from 'react-redux';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';

import { View, Image, Text } from '@tarojs/components';
import AddForm from './components/AddForm';
import './index.less';
import AddressSelect from '@/pages/common/address-select';
import btn from './components/img/btn.png';
const chooseLocation = requirePlugin('chooseLocation');
actions().actions.loadReducer();

// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class AddressAddD extends React.Component<Partial<T.IProps>, any> {

  // 使用state值
  // constructor(props) {
  //   super(props)
  //   this.state={
  //     test:1
  //   }
  // }

  componentDidMount() {
    // 或取路由值  // eg: { id: 2, type: 'test' }
    let { id } = Taro.getCurrentInstance()?.router?.params
    this.props.actions.init(id)
  }

  componentDidShow() {
    // 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
    // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
    const location = chooseLocation.getLocation();
    if (location) {
      console.log('-----------------------location-----------------------');
      console.log(location)
    }
  }

  componentWillUnmount() {
    this.props.actions.clean();
    // 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
    chooseLocation.setLocation(null);
  }

  render() {
    if (!this.props.main) return null
    let {
      main: { isLoading, pickerShow, currentAddress, areaIds },
      actions: { action }
    } = this.props
    let areaAddress = areaIds;
    if (areaAddress && !areaAddress[3]) {
      areaAddress[3] = -1;
    }
    return (
      <View className="pageAddressAddD">
        <AddForm />
        {pickerShow && (
          <AddressSelect
            title="请选择"
            areaIds={areaAddress}
            onCancel={() => action.commonChange('main.pickerShow', !pickerShow)}
            onSelect={(selAreas) => {
              this.props.actions.action.commonChange(
                'main.areaIds',
                selAreas.map((item) => item.addrId),
              );
              const areaInfo = selAreas.reduce((a, b: any) => `${a}${b.addrName} `, '');
              this.props.actions.action.commonChange('main.areaInfo', areaInfo);
              action.commonChange('main.pickerShow', !pickerShow);
            }}
          />
        )}
        <View className='props-bottom'>
          {/* <Image
            className="btn-icon"
            src={btn}
            mode="widthFix"
            onClick={() => {
              action.submit();
            }}
          /> */}
          <View
            className="bottom-btn"
            onClick={() => {
              action.submit();
            }}
          >
            <Text className="btn-text">保存</Text>
          </View>
        </View>
      </View>
    );
  }
}
